const aiSelectionBarPosition = ref({
    x: 0,
    y: 0,
    type: "top",
});
const aiSelectionBarShow = ref(false);
const aiChatInputShow = ref(false);
export const useAISelectionBar = () => {

    const setAiSelectionBarPosition = async (position: { x: number; y: number; type: "top" | "bottom" }) => {
        aiSelectionBarPosition.value = position;
    };
    const { removeAllSpanActive } = useEditorAgent()
    const setAiSelectionBarShow = (visible: boolean) => {
        aiSelectionBarShow.value = visible;
        if (!visible) {
            removeAllSpanActive()
        }
        aiChatInputShow.value = false;
    }


    const setAiChatInputShow = (visible: boolean) => {
        aiChatInputShow.value = visible;
    };
    const { getEditor } = useEditorAgent()
    const setAiSelectionBarPositionHandler = () => {
        requestAnimationFrame(() => {
            const editor = getEditor()?.editor
            if (!editor) return;
            let selects = null;
            const selectDataActives = Array.from(
                document.querySelectorAll(".select-data-active")
            );
            if (aiChatInputShow.value && !selectDataActives?.length) return
            const selectDatas = Array.from(document.querySelectorAll(".select-data"));
            selects = selectDataActives.length ? selectDataActives : selectDatas;
            const lastRect = selects?.[selects.length - 1]?.getBoundingClientRect();
            setAiSelectionBarPosition({
                y: lastRect?.bottom + 2,
                x: lastRect?.left,
                type: "bottom",
            });
        });
    };
    return {
        setAiSelectionBarPositionHandler,
        setAiSelectionBarPosition,
        aiSelectionBarPosition,
        setAiSelectionBarShow,
        aiSelectionBarShow,
        setAiChatInputShow,
        aiChatInputShow,
    }
}